<template>
    <div id="me_box">
        <div id="me_background">
            <img src="./../../static/img/me_bacakground.jpg" alt="">
        </div>
        <div id="me_content">
            <div class="my_data">
                <div class="my_one">
                    <div class="context">
                        <div class="my_title">
                            <img :src="'http://drcy.wyx.ac.cn/'+userInfo.heade_img" alt="">
                        </div>
                        <div class="my_name">
                            <p>{{userInfo.name}}</p>
                            <div class="sex">
                                <img src="./../../static/img/man.png" alt="">
                            </div>
                        </div>
                    </div>
                   
                    <div class="my_edit">
                        <router-link to="/edit_data">编辑资料</router-link>  
                    </div>
                </div>

                <div class="my_two">
                    <p>{{userInfo.personal_profile}}</p>
                </div>
                <div class="my_three">
                    <div class="gps_img">
                        <img src="./../../static/img/gps.png" alt="">
                    </div>
                    <div>
                        <span v-for="(item,index) in userInfo.adress" :key="index">{{item}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
p{
    margin: 0;
}
    #me_box{
        width: 100%;
    }
    #me_box>#me_background{
        width: 100%;
        height: 200px;
    }
    #me_box>#me_background>img{
        width: 100%;
        height: 100%;
    }
    #me_content{
        width: 100%;
        background: #fff;
    }
    #me_content>.my_data{
        padding-bottom: .5em;
        border-bottom: 1px solid #eaeaea;
    }
    .my_one{
        width: 100%;
        display: flex;
        justify-content:space-between;
        align-items: center;
        padding: .5em;
    }
    .my_one>.context{
        display: flex;
        align-items: center;
    }
    .my_one>.context>.my_title{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .5em;
        font-weight: bold;
    }
    .my_one>.my_edit{
        width: 80px;
        border-radius: .5em;
        border:1px solid #e47f7f;
        text-align: center;
        font-size: .8em;
        padding: .3em;
    }
    .my_title>img{
        width: 100%;
    }
    .my_name{
        display: flex;
        align-items: center;
    }
    .sex{
        width: 30px;
        height: 30px;
    }
    .sex>img{
        width: 100%;
        height: 100%;
    }

    .my_two{
        font-size: .7em;
        padding-left: .8em;
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .my_three{
        display: flex;
        align-items: center;
        padding-left: .4em;
    }
    .gps_img{
        width: 25px;
        height: 25px;
    }

    .gps_img>img{
        width: 100%;
    }
</style>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'
import BMap from "BMap"
export default {
    data(){
        return{
            priec:'',
            userName:'',
            userInfo:{}
        }
    },
    // computed:{
    //     userInfo(){
    //         return JSON.parse(localStorage.userInfo)
    //     },
    //     userName(){
    //         return this.$store.state.userName
    //     }
    // },
    created(){
        this.addUserName();
        this.getUserInfo()
        this.getMap()
    },
    methods:{
        addUserName(){
            let userName=Cookies.get("userName")
            this.userName=userName
        },
        getUserInfo(){
            axios.post('http://localhost:3000/userInfo',{
                userName:this.userName
            }).then(res=>{
                let response=res.data;
                if(response.status==200){
                    this.userInfo=response.result
                }else{
                    console.log(123)
                }
            })
        },
        getMap(){
            var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r){
					if(this.getStatus() == BMAP_STATUS_SUCCESS){
						//以指定的经度与纬度创建一个坐标点
						var pt = new BMap.Point(r.point.lng,r.point.lat);
						//创建一个地理位置解析器
						var geoc = new BMap.Geocoder();
						geoc.getLocation(pt, function(rs){//解析格式：城市，区县，街道
							var addComp = rs.addressComponents;
							console.log(addComp.city + ", " + addComp.district + ", " + addComp.street);
						});    
					}
					else {
						$(ev.currentTarget).text('定位失败');
					}        
				},{enableHighAccuracy: true})//指示浏览器获取高精度的位置，默认false
        }
        
    }
}
</script>


